<template>
    <div id="app">
        <!-- <div class="box">
            <el-button
            type="success"
            plain
            size="mini"
            @click="handlePrintOpen"
          >打印</el-button>
        </div> -->
        <!-- <el-dialog title="打印" :visible.sync="visible" width="1200px" append-to-body> -->
        <!-- <el-tag>模板管理</el-tag> -->
        <div class="box">
            <div>
                <!-- {{ msg }}
                <button @click="sendMessage">发送</button> -->
                <el-button type="primary" @click="createTemplate">创建模板</el-button>
            </div>
        </div>
        <div class="box">
            <el-table :data="templateList" border :height="`calc(100vh - 305px)`" :highlight-current-row="true">
                <el-table-column label="模板名称" align="center" prop="title" />
                <el-table-column label="模板类型" align="center" prop="type" />
                <el-table-column label="模板宽高" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.width + " * " + scope.row.height }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="纸张大小" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.pageWidth + "mm * " + scope.row.pageHeight + "mm" }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200" fixed="right">
                    <template slot-scope="scope">
                        <a style="color: #1c84c6" @click="designTemplate(scope.row)">设计</a>
                        <a style="color: #1c84c6; margin-left: 8px" @click="previewTemplate(scope.row)">预览</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加模板" :visible.sync="addOpen" width="500px" append-to-body>
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
                <el-form-item label="模板名称" prop="title">
                    <el-input v-model="addForm.title" />
                </el-form-item>
                <el-form-item label="模板类型" prop="type">
                    <el-input v-model="addForm.type" />
                </el-form-item>
                <el-form-item label="模板宽度" prop="width">
                    <el-input-number v-model="addForm.width" :min="0" :precision="2" />
                </el-form-item>
                <el-form-item label="模板高度" prop="height">
                    <el-input-number v-model="addForm.height" :min="0" :precision="2" />
                </el-form-item>
                <el-form-item label="纸张宽度" prop="pageWidth">
                    <el-input-number v-model="addForm.pageWidth" :min="0" :precision="2" />
                </el-form-item>
                <el-form-item label="纸张高度" prop="pageHeight">
                    <el-input-number v-model="addForm.pageHeight" :min="0" :precision="2" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { GetPrintTempList, SavePrintTemp } from "@/service/baseapi";
import * as signalR from "@microsoft/signalr";
export default {
    name: "Print",
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            msg: "测试",
            flag: false,
            form: {},
            addOpen: false,
            addForm: {},
            addRules: {
                title: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
                type: [{ required: true, message: "请输入模板类型", trigger: "blur" }],
                width: [{ required: true, message: "请输入模板宽度", trigger: "change" }],
                height: [{ required: true, message: "请输入模板高度", trigger: "change" }],
                pageWidth: [{ required: true, message: "请输入纸张宽度", trigger: "change" }],
                pageHeight: [{ required: true, message: "请输入纸张高度", trigger: "change" }]
            },
            templateList: [],
            //组件接口没做，写完对应的直接扔数据库
            widgets: [],
            licenseInfo: {
                strCompanyName: "xxx有限公司",
                strLicense: "ab123456789",
                strLicenseA: "bb123456",
                strLicenseB: "cc123456"
            },
            data: [
                {
                    qrcode: "AGGKA",
                    orderNumber: "MP11139124041900001",
                    po: "8300045387",
                    pn: "730101001281",
                    qy: 30,
                    bid: "昌元兴",
                    dc: "2024-10-11",
                    ln: "3443",
                    vid: "深圳市昌元兴科技有限公司",
                    ns: "G7 neoway 模块标贴 V1.0",
                    specifications: "G7 neoway 模块标贴 V1.0,尺寸:9.3x8.8mm，材质:50番PI+背胶,尺寸:9.3x8.8mm，材质:50番PI+背胶"
                },
                {
                    qrcode: "AGGKA",
                    orderNumber: "MP11139124041900001",
                    po: "111111111",
                    pn: "222222222",
                    qy: 30,
                    bid: "3333333",
                    dc: "2024-10-11",
                    ln: "444444444",
                    vid: "深圳市昌元兴科技有限公司",
                    ns: "G7 neoway 模块标贴 V1.0",
                    specifications: "G7 neoway 模块标贴 V1.0,尺寸:9.3x8.8mm，材质:50番PI+背胶,尺寸:9.3x8.8mm，材质:50番PI+背胶"
                }
            ],
            template: null
        };
    },
    created() {
        this.getList();
        // this.connect();
    },
    methods: {
        // connect() {
        //     this.connection = new signalR.HubConnectionBuilder()
        //         .withUrl("http://localhost:5198/yourhub") // 修改为你的SignalR Hub URL
        //         .configureLogging(signalR.LogLevel.Information)
        //         .build();

        //     this.connection.on("ReceiveMessage", res => {
        //         console.log(res);
        //         this.msg = res;
        //     });

        //     this.connection.start().catch(err => console.error(err.toString()));
        // },
        // sendMessage() {
        //     this.connection.invoke("SendMessage", "YourUsername").catch(err => console.error(err.toString()));
        // },
        getList() {
            this.openLoading();
            this.templateList = [];
            var that = this;
            GetPrintTempList()
                .then(res => {
                    console.log(res);
                    if (res.data != undefined) {
                        that.templateList = res.data.list;
                    }
                    that.closeLoading();
                })
                .catch(err => {
                    this.$message.error("数据请求异常");
                    that.closeLoading();
                });
        },
        handlePrintOpen() {
            this.visible = true;
        },
        handlePrintflag() {
            this.flag = true;
        },
        handlePrintaddOpen() {
            this.addOpen = true;
        },
        createTemplate() {
            this.addOpen = true;
        },
        onSubmit() {
            var that = this;
            this.$refs["addForm"].validate(valid => {
                var that = this;

                if (valid) {
                    that.openLoading();
                    var jsondata = {
                        ...this.addForm
                    };
                    SavePrintTemp(jsondata)
                        .then(res => {
                            console.log(res);
                            that.closeLoading();
                            that.$message({ message: "操作成功", type: "success" });
                            that.getList();
                            that.addOpen = false;
                        })
                        .catch(err => {
                            that.$message.error("操作失败");
                            that.closeLoading();
                        });
                }
            });
        },
        designTemplate(row) {
            this.$router.push({
                name: "designer",
                params: {
                    zqh: row
                }
            });
        },
        previewTemplate(row) {
            try {
                row.tempItems = JSON.parse(row.tempItems);
            } catch (e) {}
            this.$lodop.preview(row, this.data, true);
        }
    }
};
</script>

<style scoped></style>
